<template>
  <el-button type="success" @click="add">添加客户信息</el-button>
<!--  <el-button type="primary">回到首页</el-button>-->
  <br/>
  <br/>
  <div >
    客户名称：<el-input style="width: 15%" v-model="clientForm.name" clearable placeholder="请输入客户名称" />
    手机号：<el-input style="width: 15%" v-model="clientForm.phone" clearable placeholder="请输入手机号" />
    &nbsp;<el-button type="primary" @click="query">搜索</el-button>
  </div>
  <br/>
  <el-table :data="clientData" border style="width: 100%">
    <el-table-column prop="id" label="客户编号" width="180" />
    <el-table-column prop="name" label="客户名称" width="180" />
    <el-table-column prop="address" label="客户地址" width="180" />
    <el-table-column prop="phone" label="联系方式" width="180" />
    <el-table-column prop="custTicket" label="水票数量" width="180" />
    <el-table-column label="操作" width="180" >
      <template #default="scope">
        <el-button type="success" @click="upd(scope.row)">修改</el-button>
        <el-button type="danger" @click="del(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <p style="text-align: center;font-size: 15px">当前第<font color="red">{{clientForm.pageNum}}</font>页 共<font color="red">{{clientForm.pages}}</font>页 一共<font color="red">{{clientForm.total}}</font>条记录</p>
  <br/>
  <el-pagination
      style="position: absolute;right: 25%"
      v-model:current-page="clientForm.pageNum"
      v-model:page-size="clientForm.pageSize"
      :page-sizes="[5, 10, 20, 40]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="clientForm.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
  />
</template>
<script setup>
  import {ref,reactive,onMounted} from "vue";
  import request from "@/api/request";
  import router from "@/router";
  import {ElMessage,ElMessageBox} from "element-plus";

  const clientForm = reactive({
    name:'',
    phone:'',
    pageNum:1,
    pageSize:5,
    pages:0,
    total:0
  })
  const clientData = ref([]);
  const query = () => {
    request.get('/clients/getclient',{
      params:{
        name:clientForm.name,
        phone:clientForm.phone,
        pageNum:clientForm.pageNum,
        pageSize:clientForm.pageSize
      }
    }).then(resp=>{
      if(resp) {
        clientData.value = resp.data.records;
        clientForm.pages = resp.data.pages;
        clientForm.total = resp.data.total;
      }
    })
  }
  const handleSizeChange = (val) => {
    clientForm.pageSize = val;
    query();
  }
  const handleCurrentChange = (val) => {
    clientForm.pageNum = val;
    query();
  }


  const add = () => {
    localStorage.setItem("clientId",0);
    router.replace('/addClient');
  }

  const upd = (row) => {
    localStorage.setItem("clientId",row.id);
    router.replace('/addClient');
  }

  const del = (id) => {
    ElMessageBox.confirm(
        '确认删除吗?',
        '提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }
    )
        .then(() => {
          request.delete('/clients/delclient/'+id).then(resp=>{
            if (resp.code === 20000) {
              ElMessage.success(resp.data);
              query();
            } else {
              ElMessage.error(resp.data);
            }
          })
        })
  }

  onMounted(()=>{
    query();
  })
</script>